Skip to main content

Performance

Performance matters, even more if we talk about CTV devices.

In order to improve the performance we need to try to aim to the next items

  • Images must match the size of the container, no more, no less
  • The bundles sizes must be as small as possible. Use dynamic imports wherever is possible
  • Backend must compress the content and set the right cache
  • Dns must be prefetch when possible

In place actions​

Bundles prepared to long cache strategies​

https://webpack.js.org/guides/caching/

All the bundles are created with a hash on the name. This way we can ensure that we can apply long term caching strategies. https://csswizardry.com/2019/03/cache-control-for-civilians/

dns prefetch​

https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch

DNS prefetch is handled by the webpack.common.js file. We can add more domains to the DNS_PREFETCH array to facilitate the dns resolution before we need the resource.

We are currently prefetching the Elevate MVP required domains, including:

  • api.one.accedo.tv
  • cdn.one.accedo.tv
  • vdk-ovp.ocs2.ps.accedo.tv
  • api.themoviedb.org
  • image.tmdb.org

How to measure performance​

In order to review the performance of the Elevate applications we recommend to test the app on real devices and using tools like WebPage Test and Lighthouse to check what can be improved

LG Beanviser​

http://webostv.developer.lge.com/sdk/tools/beanviser/

LG Beanviser is a good tool to get the memory heap snapshot and try to understand what is happening on the device.

WebPage Test​

https://www.webpagetest.org/

This tool is free and allow us to test public (or private urls behind some kind of authentication) URLs giving some advices about what assets are too big or with an incorrect setup. As an example we were able to find images > 100kb and decrease the loaded data from 13Mb to 5Mb

Lighthouse​

https://developers.google.com/web/tools/lighthouse

Lighthouse is part of the Google Chrome tools and is a very useful tool to check how we can improve the application.

The adventage of this tools is that we can run it locally on the dev environment.